
<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="filter-title filter-item">按等级筛选</span>
      <k-select
        v-model="listQuery.level"
        class="filter-item user-status"
        type="1"
        :select-params="RarityList"
        @handleSelectEvent="handleFilter"
      />
      <k-input
        v-model.trim="listQuery.name"
        class="filter-item"
        is-search
        placeholder="产品名称/资产项目名称关键词搜索 "
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>

    <!-- 创建 roll 房 -->
    <!-- <k-button
      class="top-btn"
      value="预警设置"
      @click.native="ruleGuideDialog"
    /> -->
    <k-button
      v-if="authorityHandle(456)"
      class="top-btn"
      value="比例设置"
      @click.native="clickScaleSettings"
    />
    <k-button
      class="top-btn"
      value="购买须知"
      @click.native="purchaseNotes"
    />

    <!--表格相关 -->
    <el-table
      :data="bloodTableData"
      fit
      border
      :row-class-name="tableRowClassName"
      style="width: 100%; border-radius: 8px; margin-top: 10px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column min-width="60px" type="selection" align="center" />
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column
        prop="productName"
        min-width="80px"
        label="产品名称"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column prop="remainingCount" min-width="150px" label="剩余张数" align="center"/>

      <el-table-column min-width="150px" label="产品图片" align="center">
        <template slot-scope="scope">
          <KImage
            :imagevalue="scope.row.coverUp"
            width-item="50px"
            height-item="50px"
            pathType="1"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="userHoldCount"
        min-width="100px"
        label="玩家现有张数"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        min-width="80px"
        label="等级"
        align="center"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
         <span>{{getOptionLabel(scope.row.level,'RarityList')}}</span>
      </template>
    </el-table-column>
      <el-table-column
        min-width="80px"
        label="积分数值"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span
            @dblclick="dblclickintegralNum(scope.row)"
            v-show="scopeRowProductId != scope.row.productId"
            >{{ scope.row.bonusPointsPrice }}</span
          >
          <el-input
            v-model="scope.row.bonusPointsPrice"
            placeholder="请输入"
            @keyup.enter.native="handleEnter(scope.row.bonusPointsPrice)"
            v-show="scopeRowProductId == scope.row.productId"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="150px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              class="table-btn"
              value="购买限制"
              @click.native="singlePurchaseLimit(scope.row)"
              v-if="authorityHandle(413)"
            />
            <k-button class="table-btn" v-if="authorityHandle(413)" value="查证" @click.native="updateBloodDialog(scope.row)" />
            <k-button class="table-btn" v-if="authorityHandle(413)" value="溯源" @click.native="deleteRedItem(scope.row)" />
                <!--   <k-button class="table-btn"  value="单次购买上限" @click.native="singlePurchaseLimit(scope.row)" /> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="loadData"
    />
    <!-- 预警设置 弹窗 -->
    <k-dialog
      :show-hide.sync="ruleGuide.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="预警设置"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveManualData"
    >
      <div class="dialog-ruleGuide" style="padding: 30px">
        <el-form :model="ruleGuideContent" label-width="auto">
          <el-form-item label="预警设置：">
            <el-input
              v-model="ruleGuideContent.count"
              placeholder="请输入预警设置数量："
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
    <!-- 购买须知 -->
    <k-dialog
      :show-hide.sync="purchaseNotesDia.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="购买须知"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="purchaseNotesDiaBtn"
    >
      <div class="dialog-ruleGuide" >
      <quill-editor
        ref="myQuillEditor"
        v-model.trim="purchaseNotesDia.textarea"
        :options="editorOption"
        class="editer"
      />
      </div>
    </k-dialog>
    <!-- 预警弹窗 -->
    <k-dialog
      :show-hide.sync="warning.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="数字卡预警"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="false"
      @click="cancelPop"
    >
      <div class="dialog-ruleGuide" style="padding: 30px">
        <el-form label-width="auto">
          <el-form-item
            label="警告："
            v-for="(item, index) in warningState"
            :key="index"
          >
            <el-input
              v-model="item.content"
              readonly
              style="min-width: 300px"
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
    <!-- 单次购买上限 弹窗 -->
    <k-dialog
      :show-hide.sync="purchaseLimit.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="购买限制"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="purchaseLimitBtn"
    >
      <div class="dialog-ruleGuide" style="display: flex; padding: 0 30px;align-items: center;">
        <span>最低: </span>
        <el-input v-model.number="purchaseLimit.buyLimitMin" placeholder="请输入张数" style="width: 120px;"/>
        <span style="padding: 0 10px;">-</span>
        <span>最高: </span>
        <el-input v-model.number="purchaseLimit.buyLimit" placeholder="请输入张数" style="width: 120px;"/>
        <span>张</span>
      </div>
    </k-dialog>
    <!-- 比例设置 弹窗 -->
    <k-dialog
      :show-hide.sync="scaleSettings.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="比例设置"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="scaleSettingsBtn"
    >
      <div class="dialog-ruleGuide" style="display: flex; padding: 0 40px">
        <span
          style="
            display: flex;
            align-items: center;
            font-size: 16px;
            margin: 0 10px;
          "
          >1 =
        </span>
        <el-input
          v-model="scaleSettings.cardProportion"
          placeholder="请输入"
          style="width: 100px"
        />
        <span
          style="
            display: flex;
            align-items: center;
            font-size: 16px;
            margin: 0 10px;
          "
          >积分</span
        >
      </div>
    </k-dialog>
    <comIndex ref="comIndex"/>
    <shuoyuan ref="shuoyuan"/>
  </div>
</template>
<script>
import {
  cardList,
  setCardBuyLimit,
  getCardProportion,
  setCardProportion,
  warningCount,
  cardProductWarning,
  SetcardWarning,
  setCardBonusPointsPrice,
  getBuyNeedsToKnow,
  setBuyNeedsToKnow
} from "@/api/bullet/index";
import comIndex from "@/components/comBullet/comIndex.vue";
import shuoyuan from "@/components/comBullet/shuoyuan.vue";
import Pagination from "@/components/Pagination";
import { browserType } from "@/utils/validate";
export default {
  components: { Pagination, comIndex, shuoyuan },
  data() {
    return {
      // 下拉搜索项0
      CategoryWorks: [], // 作品类别list
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        current: 1,
        size: 10,
        name: "",
        level: "",
      },

      RarityList: [
        { value: 1, label: "N" },
        { value: 2, label: "R" },
        { value: 3, label: "SR" },
        { value: 4, label: "SSR" },
        { value: 5, label: "UR" },
        { value: 6, label: "SP" },
      ],
      bloodTableData: [],
      timeValue: "",
      ruleGuideContent: {
        count: undefined,
      },
      ruleGuide: {
        showHide: false,
      },
      // 单次购买上限
      purchaseLimit: {
        showHide: false,
        buyLimit: "",// 最大
        buyLimitMin:"", // 最小
      },
      // 比例设置
      scaleSettings: {
        showHide: false,
        cardProportion: "1",
      },
      warningState: [],
      warning: {
        showHide: false,
      },
      // 需要像接口传的参数
      parame: {
        productId: "",
      },
      scopeRowProductId:'',
      // 购买须知
      purchaseNotesDia:{
        showHide: false,
        textarea:""
      },
      editorOption: {
        placeholder: '请输入内容',
        modules: { // 富文本初始化
          'emoji-toolbar': true,
          'emoji-shortname': true,
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ script: 'sub' }, { script: 'super' }], // 上下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'], // 上传图片、上传视频
            ['emoji']
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      }
    };
  },
  created() {
    this.loadData();
    // 数字卡预警弹窗
    // this.getGetcardWarning();

  },
  methods: {
    // 表格行样式
    tableRowClassName({row, rowIndex}) {
      if (row.warnStatus === 1) {
        return 'table-row';
      }
      return '';
      },
 /**
   * 根据value获取label
   * @param value
   * @param optionKey
   * @param prop
   * @returns {string}
 */
 getOptionLabel(value, optionKey, prop = {
      value: 'value',
      label: 'label'
    }) {
      if (!value) return '-'
      return ((this[optionKey] || []).find(e => e[prop.value] === value) || {})[prop.label] || value
    },
    cancelPop() {
      this.warning.showHide = false;
    },
    // 获取预警
    getGetcardWarning() {
      cardProductWarning().then((result) => {
        if (result.status === 200) {
          this.warningState = result.data;
          if (result && result.data.length > 0) this.warning.showHide = true;
        }
      });
    },
    // 修改积分数值
    handleEnter(val) {
      setCardBonusPointsPrice({bonusPointsPrice:val,productId:this.scopeRowProductId}).then((result) => {
        if (result.status === 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.scopeRowProductId = ''
        }
      });
    },
    // 积分数值
    dblclickintegralNum(row) {
      this.scopeRowProductId = row.productId
    },
    // 确定单次购买上限
    purchaseLimitBtn() {
      setCardBuyLimit({
        productId: this.parame.productId,
        buyLimit: this.purchaseLimit.buyLimit,
        buyLimitMin:this.purchaseLimit.buyLimitMin
      }).then((res) => {
        if (res.status === 200) {
          this.purchaseLimit.showHide = false;
          this.purchaseLimit.buyLimit = "";
          this.purchaseLimit.buyLimitMin = "";
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.loadData();
        } else this.$message.error("操作失败");
      });
    },
    // 单次购买上限弹窗
    singlePurchaseLimit(row) {
      this.parame.productId = row.productId;
      this.purchaseLimit.buyLimit = row.buyLimit
      this.purchaseLimit.buyLimitMin = row.buyLimitMin
      this.purchaseLimit.showHide = true;
    },
    // 购买须知
    async purchaseNotes(){
      const res  = await getBuyNeedsToKnow()
      if(res.status == 200 ){
        this.purchaseNotesDia.textarea = res.data.data || ''
      }
      this.purchaseNotesDia.showHide = true;
    },
    async purchaseNotesDiaBtn(){
      const res  = await setBuyNeedsToKnow({data:this.purchaseNotesDia.textarea})
      if(res.status == 200){
        this.$message({
            message: "保存成功",
            type: "success",
          });
        this.purchaseNotesDia.showHide = false;
      }
    },
    // 比例设置
    clickScaleSettings() {
      getCardProportion().then((result) => {
        if (result.status === 200) {
          this.scaleSettings.cardProportion = result.data;
        }
      });
      this.scaleSettings.showHide = true;
    },
    scaleSettingsBtn() {
      setCardProportion({
        cardProportion: this.scaleSettings.cardProportion,
      }).then((result) => {
        if (result.status === 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.scaleSettings.showHide = false;
          this.loadData();
        }
      });
    },
    // 预警设置
    saveManualData() {
      const formData = new FormData();
      if (browserType("ie")) {
        formData.append("count", this.ruleGuideContent.count);
      } else {
        formData.set("count", this.ruleGuideContent.count);
      }
      SetcardWarning(formData).then((res) => {
        if (res.status === 200) {
          this.ruleGuide.showHide = false;
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.loadData();

        } else this.$message.error("操作失败");
      });
    },
    loadData() {
      cardList({ ...this.listQuery }).then((res) => {
        this.totalRows = res.data.total;
        this.bloodTableData = res.data.records;
      });
    },
    updateBloodDialog(row) {
      this.$refs.comIndex.listData(row);
    },
    deleteRedItem(row) {
      this.$refs.shuoyuan.listData(row);
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.current = 1;
      this.loadData();
    },

    ruleGuideDialog() {
      // 预警设置
      warningCount().then((res) => {
        this.ruleGuideContent.count = res.data;
      });
      this.ruleGuide.showHide = true;
    },
  },
};
</script>
<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调
::v-deep .el-table .table-row{
  color: red;
}
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .kInput {
    position: absolute;
    right: 20px;
  }
  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162e;
  }
  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }
  .room-type,
  .user-status,
  .account-status {
    margin-right: 20px;
  }
}
.red_money {
  width: 200px;
}
.grid-div {
  display: grid;
  grid-template-columns: repeat(7, 120px);
  .item {
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #e3e2e7;
    width: 120px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
  }
}
.top-btn {
  margin: 30px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;
  &:nth-of-type(2) {
    margin-left: 10px;
  }
}
.kSelect .el-select .el-input .el-input__inner {
  width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: $mainColor;
}
::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}
.el-form-item__label-wrap .el-form-item__label {
  float: none;
}

.dialog_creatRollRoom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 40px 80px;
  ::v-deep .el-select .el-select__tags > span {
    display: none;
  }
  ::v-deep .el-range-editor.el-input__inner {
    width: 400px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;
    ::v-deep .el-tag__close {
      color: $mainColor;
    }
    ::v-deep .el-icon-close:hover {
      color: #ffffff;
      background: $mainColor;
    }
  }
}

.form-modify {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 10px 80px;
}

.editer {
  width: 500px;
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;
  ::v-deep .ql-container {
    height: 270px;
    border-radius: 0px 0px 8px 8px;
  }
  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}
.chargeform {
  display: flex;
  flex-direction: row;
}

::v-deep .el-switch__label.is-active {
  color: $mainColor;
}

.addBox_dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  ::v-deep .el-dialog__body {
    width: 678px;
    margin: 40px 80px;
  }
  ::v-deep .el-select .el-select__tags > span {
    display: none;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;
    ::v-deep .el-tag__close {
      color: $mainColor;
    }
    ::v-deep .el-icon-close:hover {
      color: #ffffff;
      background: $mainColor;
    }
  }
}
.cell-baby {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.ellipsis-span {
  width: 80px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
